<template>
  <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide><img :src="swiperPic1" /></swiper-slide>
        <swiper-slide><img :src="swiperPic2" /></swiper-slide>
        <swiper-slide><img :src="swiperPic3" /></swiper-slide>
        <swiper-slide><img :src="swiperPic4" /></swiper-slide>
        <swiper-slide><img :src="swiperPic5" /></swiper-slide>
        <swiper-slide><img :src="swiperPic6" /></swiper-slide>
        <swiper-slide><img :src="swiperPic7" /></swiper-slide>
        <swiper-slide><img :src="swiperPic8" /></swiper-slide>
        <swiper-slide><img :src="swiperPic9" /></swiper-slide>
        <swiper-slide><img :src="swiperPic10" /></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import 'swiper/css/swiper.css'
export default {
  name: 'swiperDemo', 
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
      return {
          swiperPic1: require('@/assets/nature-1.jpg'),
          swiperPic2: require('@/assets/nature-2.jpg'),
          swiperPic3: require('@/assets/nature-3.jpg'),
          swiperPic4: require('@/assets/nature-4.jpg'),
          swiperPic5: require('@/assets/nature-5.jpg'),
          swiperPic6: require('@/assets/nature-6.jpg'),
          swiperPic7: require('@/assets/nature-7.jpg'),
          swiperPic8: require('@/assets/nature-8.jpg'),
          swiperPic9: require('@/assets/nature-9.jpg'),
          swiperPic10: require('@/assets/nature-10.jpg'),
          swiperOption: {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                // spaceBetween: '18%',
                slidesPerView: 3,
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 360,
                    modifier: 1,
                    slideShadows: false,
                }
          }
      }
  }
};
</script>

<style lang="scss" scoped>
.swiper {
    width: 800px;
    height: 300px;
    .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            display: block;
            width: 200px;
            height: auto;
        }        
    }
}
</style>